import React from "react";
import dynamic from "next/dynamic";
import { useProducts } from "@/business.InterfaceLayer/hooks/store/useQueryStore/useQueryStore";
import { globalContainer } from "@/user.InterfaceLayer/constants/styles/CommonStyles";
import useCartStore from "@/business.InterfaceLayer/hooks/store/localstorage/useCartStore";
import SelectionPanelCeil from "@/user.InterfaceLayer/Libraries/UI_KIT/Cells/SelectionPanel.ceil";
import EmptyBlockWidget from "@/user.InterfaceLayer/Libraries/Widgets/EmptyBlock.widget";
import { useTranslation } from "react-i18next";
import TextAtom from "@/user.InterfaceLayer/Libraries/UI_KIT/Atoms/Text.Atom";
import TextAtomEnum from "@/user.InterfaceLayer/Libraries/UI_KIT/Atoms/Text.Atom/enum";
import SkeletonAtom from "@/user.InterfaceLayer/Libraries/UI_KIT/Atoms/Skeleton.Atom";

const BreadcrumbsAtom = dynamic(
  () => import("@/user.InterfaceLayer/Libraries/UI_KIT/Atoms/Breadcrumbs.Atom")
);
const Promotional = dynamic(
  () => import("@/user.InterfaceLayer/Libraries/UI_KIT/Cells/Promotional.cell")
);
const CartBlock = dynamic(
  () => import("@/user.InterfaceLayer/Libraries/Widgets/CartBlock.widget")
);

const CartPage: React.FC = () => {
  const { t } = useTranslation();
  const { isLoading } = useProducts();
  const { items, total } = useCartStore();

  const renderContent = () => {
    if (isLoading) {
      return (
        <>
          <TextAtom
            className="mt-10 mb-6 font-semiBold text-tiffany uppercase"
            type={TextAtomEnum.enum_h1}
          >
            {t("CartPage.title")}
          </TextAtom>
          <div className="w-full h-[86px]">
            <SkeletonAtom />
          </div>
          {Array.from({ length: 3 }).map((_, index) => (
            <div className="w-full h-[252px]" key={index}>
              <SkeletonAtom />
            </div>
          ))}
        </>
      );
    }
    if (items.length === 0) {
      return (
        <EmptyBlockWidget
          subHead={t("CartPage.EmptyBLock.subHead")}
          title={t("CartPage.EmptyBLock.title")}
          subTitle={t("CartPage.EmptyBLock.subTitle")}
        />
      );
    }
    return (
      <>
        <TextAtom
          className="mt-10 mb-6 font-semiBold text-tiffany uppercase"
          type={TextAtomEnum.enum_h1}
        >
          {t("CartPage.title")}
        </TextAtom>
        <div className="mb-2">
          <Promotional total={total} />
        </div>
        <SelectionPanelCeil />
        {items.map((e, index) => (
          <CartBlock
            key={index}
            title={e.title}
            sum={e.sum}
            color={e.colors}
            id={e.id}
            price={e.price}
            count={e.quantity}
            img_paths={e.img_paths}
            isSelected={e.isSelected}
          />
        ))}
      </>
    );
  };

  return (
    <div className={`${globalContainer} min-h-screen`}>
      <BreadcrumbsAtom />
      <div className="flex flex-col gap-2 ">{renderContent()}</div>
    </div>
  );
};
export default CartPage;
